<template>
  <!--  <el-dialog v-model="visible" :width="600" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">-->
  <ElForm ref="dataFormRef" :model="model" :rules="dataRules" label-width="120px">
    <ElRow>
      <ElCol :span="12">
        <el-form-item label="姓名" prop="name">
          <el-select
              v-model="model.name"
              filterable
              allow-create
              remote
              :remote-method="remoteMethod"
              :loading="inputLoading"
              placeholder="请选择"
              @change="nameChange">
            <el-option v-for="item in imeiList" :key="item" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="model.telephone" placeholder="电话"></el-input>
        </el-form-item>
      </ElCol>
      <ElCol :span="12">
        <el-form-item label="身份证号" prop="idNo">
          <el-input v-model="model.idNo" placeholder="身份证号"></el-input>
        </el-form-item>
      </ElCol>
    </ElRow>
    <el-form-item label="驾驶证照片" prop="licensePhoto">
      <el-upload
        class="avatar-uploader"
        :action="constant.uploadUrl"
        :headers="{
          Authorization: userStore.token
        }"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="model.licensePhoto" :src="model.licensePhoto" class="avatar" alt="" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
  </ElForm>
  <!--    <template #footer>-->
  <!--      <el-button @click="visible = false">取消</el-button>-->
  <!--      <el-button type="primary" @click="submitHandle()">确定</el-button>-->
  <!--    </template>-->
  <!--  </el-dialog>-->
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useDriverApi, useSearchNameApi } from '@/api/biz/driver'
import { useTeamListApi } from '@/api/biz/team'
import constant from '@/utils/constant'
import { useUserStore } from '@/store/modules/user'
import {
  ElCol,
  ElOption,
  ElSelect,
  ElDescriptions,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRow,
  UploadProps,
  ElUpload,
  ElIcon,
  ElForm
} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const model = defineModel<any>()
const imeiList = ref<any[]>([])
const inputLoading = ref(false)
const emits = defineEmits(['updateValue'])
const userStore = useUserStore()
const visible = ref(false)
const dataFormRef = ref()
const carList = ref<any[]>([])

const getDriver = (id: number) => {
  useDriverApi(id).then((res) => {
    Object.assign(model.value, res.data)
  })
}

watch(
  () => model.value,
  (val) => {
    console.log('11', val)
  }
)
const dataRules = ref({
  sysOrgId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '必填项不能为空', trigger: 'change' }],
  // telephone: [{ required: true, message: '必填项不能为空', trigger: 'change' }]
})
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  // console.log(uploadFile.response.data.url)
  model.value.licensePhoto = uploadFile.response.data.url
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

function remoteMethod(query: string) {
  if (query) {
    inputLoading.value = true
    useSearchNameApi(query).then((res) => {
      inputLoading.value = false
      imeiList.value = res.data.list
    })
  } else {
    imeiList.value = []
  }
}

function getTeamList() {
  useTeamListApi(model.value).then((res) => {
    carList.value = res.data
  })
}
function nameChange(name) {
  console.log(name)
  useSearchNameApi(name).then((res) => {
    if (res.data.list.length === 0) {
      return
    }

    // eslint-disable-next-line vue/no-mutating-props
    emits('updateValue', { k: 'driver', v: res.data.list[0] })
  })
}

// 表单提交
const submitHandleDriver = () => {
  return dataFormRef.value.validate((valid: boolean) => {
    // console.log('Driver', valid)
    return valid
  })
  //
  // useDriverSubmitApi(props.data).then(() => {
  //   ElMessage.success({
  //     message: '操作成功',
  //     duration: 500,
  //   })
  // })
}

defineExpose({
  submitHandleDriver
})
</script>

<style scoped>
.item_line {
  display: flex;
}
.item_line > div {
  flex: 1;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
